<template>
	<div>
		<div class="mainList">
			<div class="list">
				<div class="list-head">
					<div class="list-head-icon clearfix">
						<img src="@/assets/img/home_img06.png" alt="">
						<h3>平台已成交订单</h3>
					</div>
				</div>
				<div class="">
					<ul class="ul" @click="todetail(item.productId)" v-for="(item, index) in orderData" :key="index">
						<li>
							<div class="top">
								<h3>{{item.productName}}({{item.farmName}})</h3>
								<span class="address">{{item.originProvince}}</span>
								<span class="price">{{item.salesPrice}}<i>{{item.salesPriceUnit}}</i></span>
							</div>
							<div class="bottom">
								<span class="bx">
									<img src="@/assets/img/home_img09.png" alt="" class="bao">
									<img src="@/assets/img/home_img10.png" alt="" class="bao2">
									{{item.insurance}}
								</span>
								<span class="quantity">{{item.quantity}}头</span>
								<span class="jh">近一周成交</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bg"></div>
	</div>
</template>

<script>
	export default {
		props: {
			orderData: Array
		},
		data(){
			return {
				
			}
		},
		methods: {
			todetail(productId){
				
				this.$router.push({
					path: '/home/detail/' + productId,
					query: {
						compelelist: 'compelelist'
					}
				})
			}
		}
	}
	
	
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeCom.scss";
	.price {
		flex: 1;
		text-align: right;
	}
	.bx {
		display: block;
		width: 170px;
	}
	.address {
		margin-left: 30px;
	}
	.quantity {
		width: 70px;
		margin-left: 16px;
	}
	.jh {
		flex: 1;
		text-align: right;
	}
	
		
	.list-ul {
		border-bottom: 1px solid #e5e5e5;
		padding: 16px;
		height: 84px;
		ul {
			width: 64% !important;
			border: none;
			float: left;
			.odiv{
				span {
					color: #969C9E;
					font-size: 12px;
				}
				.title{
					float: left;
				}
				.title1{
					color: #344047;
					width: 170px;
					float: left;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.title2{
					color: #969C9E;
					font-size: 12px;
					img{
						width: 11px;
						margin-right: 4px;
						vertical-align: middle;
					}
					img:last-child {
						margin-right: 0;
					}
				}
			}
			.list-top{
				margin-bottom: 24px;
				position: relative;
				span{
					position: absolute;
					left: 194px;
				}
			}
			.list-btm{
				position: relative;
				span{
					position: absolute;
					left: 194px;
				}
			}
		}
	}
	.right{
		width: 36%;
		height: 68px; 
		padding-bottom: 19px;
		float: right;
		text-align: right;
		span {
			color: #969C9E;
			font-size: 12px;
			float: right;
			margin-bottom: 24px;
			i{
				color: #F58523;
				font-size: 14px;
				font-weight: 600;
			}
		}
		
	}
	
	.list {
		.list-head{
			width: 100%;
			padding: 0 16px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.list-head-icon {
				width: 100%;
				display: flex;
				align-items: center;
				img {
					position: relative;
					top: 1px;
					width: 22px;
					height: 21px;
					object-fit: cover;
				}
			}
		}
	}
</style>
